<template>
  <el-row class="min-h-screen">

    <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
      <div class="grid-content ep-bg-purple min-h-full flex items-center justify-center">
        <img :src="monsterCurrentImg" alt="">
        <div class="form-class">
          <!--     登录框     -->

          <el-form
              :model="userLogin"
              style="max-width: 300px"
          >
            <el-form-item>
              <el-input v-model="userLogin.username" ref="usernameInputRef" type="text" placeholder="请输入用户名">
                <template>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="userLogin.password" ref="passwordInputRef" type="password" placeholder="请输入密码" @focus="psdFn()" @blur="psdBlurFn()"/>
            </el-form-item>
            <el-form-item>
              <el-input v-model="userLogin.code" type="text" placeholder="请输入验证码"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitUserInfo(userLogin)" class="min-w-68">
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-col>
    <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
      <div class="grid-content ep-bg-purple min-h-full bg-fuchsia-900 flex items-center justify-center">
        <img src="@i/hero_img.png" alt="" class="">
      </div>
    </el-col>
  </el-row>

</template>

<script setup>
// 这里可以导入其他文件 例如：组件、工具js、第三方插件js,json文件、图片文件等
// eg: import 《组件名称》 from '《文件路径》'
import { reactive, ref } from 'vue'
import {useUserLogin} from "@/views/login/data/useUserLogin.js";
import monster from '@/views/login/data/monsterImg.js';
/*gongneng1*/
const userLogin = reactive({
  username: '',
  password: '',
  code: '',
})
const { monsterCurrentImg ,usernameInputRef, passwordInputRef} = useUserLogin();
const submitUserInfo = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
    }
  })
}
/*gopngneng2*/


const psdFn = async (Event)=>{
  let current = 0;
  const cubrirOjo = setInterval(() => {
    monsterCurrentImg.value = monster.cover[current]
    if (current < 7) {
      current++;
    } else {
      clearInterval(cubrirOjo);
    }
  }, 60)
}

const psdBlurFn = async (Event)=>{

}

</script>

<style scoped>
.form-class{
  @apply w-400px bg-light-50 border-5 border-solid border-fuchsia-900 rounded-10px py-30px px-60px text-center absolute;
  transform: translateY(75%);
}

</style>
